<template>
    <div>

        <van-pull-refresh class="boxaw" v-model="isLoading" @refresh="onRefresh">
            <van-nav-bar title="- 请如实填报 -" />

            <van-form :data="lisData">
                <van-cell-group class="ab" title="姓名">
                    <van-field v-model="xzsxm" type="String" readonly placeholder="请输入姓名" />
                </van-cell-group>
                <van-cell-group class="ab" title="手机号">
                    <van-field v-model="xzssjh" type="number" readonly placeholder="请输入手机号" />
                </van-cell-group>
                <van-cell-group class="ab" title="举报事件分类">
                    <van-field name="radio">
                        <template #input>
                            <van-radio-group v-model="lisData.radio" direction="horizontal">
                                <van-radio name="1">持用伪造证件出入境</van-radio>
                                <van-radio name="2">持用变造证件出入境</van-radio>
                                <van-radio name="3">持用骗取证件出入境</van-radio>
                                <van-radio name="4">其他</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                </van-cell-group>
                <!-- <van-cell-group title="嫌疑人所在船舶国籍">
                    <van-field v-model="lisData.xyr1" :rules="formRyles.gj" placeholder="可填写不确定" />
                </van-cell-group>
                <van-cell-group title="事发具体位置">
                    <van-field v-model="lisData.sfwz" :rules="formRyles.gj" placeholder="请填写事发位置" />
                </van-cell-group>
                <van-cell-group title="嫌疑人所在船舶IMO号">
                    <van-field v-model="lisData.xyr2" :rules="formRyles.ch" placeholder="可填写不确定" />
                </van-cell-group> -->
                <van-cell-group class="ab" title="可疑人员姓名">
                    <van-field v-model="lisData.jb" placeholder="请填写" />
                </van-cell-group>
                <van-cell-group class="ab" title="其他线索">
                    <van-field v-model="lisData.qt" placeholder="如详细描述，时间，地点等" />
                </van-cell-group>
                <!-- <van-cell-group class="ab" title="拍照举证">
                    <el-upload class="avatar-uploader" accept="image/*"
                        action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </van-cell-group> -->
                <van-button native-type="submit" round type="info" size="large" class="yd" block @click="mstj">马上提交
                </van-button>
                <div style="width: 90%;height: 50px;"></div>
            </van-form>
        </van-pull-refresh>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                xzsxm: "",
                xzssfz: "",
                // xzssjh: "",
                count: 0,
                isLoading: false,
                lisData: {
                    sfz:"",
                    username: "",
                    phone: "",
                    radio: '1',
                    xyr1: "",
                    xyr2: "",
                    sfwz: "",
                    jb: '',
                    qt: "",
                },
                // **登录表单校验规则**
                formRyles: {
                    // 手机号校验规则
                    mobile: [{
                            required: true,
                            message: ''
                        },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机格式错误'
                        }
                    ],
                    xm: [{
                        required: true,
                        message: ""
                    }],
                    xq: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    gj: [{
                        required: true,
                        message: ""
                    }],
                    ch: [{
                        required: true,
                        message: ""
                    }],
                },
                imageUrl: ''
            };

        },
        mounted() {
            var mx = window.sessionStorage.getItem("mz")
            var sjh = window.sessionStorage.getItem("sjh")
            var sfz = window.sessionStorage.getItem("sfz")
            var xb = window.sessionStorage.getItem("xb")
            this.lisData.username = mx
            this.lisData.sfz = sfz
            // this.sfz = sfz
            this.lisData.phone = sjh
            // this.radio = xb
            if (xb == 1) {
                this.xb = "男"
            }
            if (xb == 2) {
                this.xb = "女"
            }
            this.name = mx
            this.sfz = sfz
            this.lxdh = sjh
            this.radio = xb
            // 须展示
            this.xzsxm = mx
            this.xzssjh = sjh
            this.xzssfz = sfz
            if (this.xzsxm.length == '2') {
                this.xzsxm = '*' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '3') {
                this.xzsxm = '**' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '4') {
                this.xzsxm = '***' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            if (this.xzsxm.length == '5') {
                this.xzsxm = '****' + this.xzsxm.charAt(this.xzsxm.length - 1)
            }
            this.xzssjh = this.xzssjh.substr(0, 3) + '******' + this.xzssjh.substr(9, 2)
            // 15位身份证号
            if (this.xzssfz.length == '15') {
                this.xzssfz = this.xzssfz.substr(0, 1) + '*************' + this.xzssfz.substr(14, 1)
            }
            // 18位身份证号
            if (this.xzssfz.length == '18') {
                this.xzssfz = this.xzssfz.substr(0, 1) + '****************' + this.xzssfz.substr(17, 1)
            }
        },
        methods: {
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            // mstj() {
            //     this.$router.push('/tjcg')
            // },
            onSubmit(values) {
                console.log('submit', values);
                console.log(this.lisData);
                this.$router.push('/tjcg')
            },
            // 图片上传
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            mstj() {
                // const axios = require('axios');
                // let data = JSON.stringify({
                //     "createBy": "",
                //     "createTime": "",
                //     "id": "",
                //     "jbsjfl": this.lisData.radio,
                //     "kyryxm": this.lisData.jb,
                //     "name": this.lisData.username,
                //     "phone": this.lisData.phone,
                //     "qtxs": this.lisData.qt,
                //     "sh": "",
                //     "shxx": "",
                //     "sysOrgCode": "",
                //     "updateBy": "",
                //     "updateTime": ""
                // });

                // let config = {
                //     method: 'post',
                //     maxBodyLength: Infinity,
                //     url: 'http://58.59.43.168:8088/jeecg-boot/api/bizJb2',
                //     headers: {
                //         'Content-Type': 'application/json'
                //     },
                //     data: data
                // };

                // axios.request(config)
                //     .then((response) => {
                //         console.log(response.data);
                //         if (response.data.code == 200) {
                //             this.$toast("提交成功")
                //             this.$router.push('./')
                //         }
                //     })
                //     .catch((error) => {
                //         console.log(error);
                //     });



                var that = this
                if (that.lisData.jb == "") {
                    that.$toast("请输入可疑人员姓名")
                    return
                }
                if (that.lisData.qt == "") {
                    that.$toast("请输入其他线索")
                    return
                }
                var jmqsjtj = JSON.stringify({
                    //入参内容
                    "createBy": "",
                    "createTime": "",
                    "id": "",
                    "jbsjfl": this.lisData.radio,
                    "kyryxm": this.lisData.jb,
                    "sfz": this.lisData.sfz,
                    "name": this.lisData.username,
                    "phone": this.lisData.phone,
                    "qtxs": this.lisData.qt,
                    "sh": "",
                    "shxx": "",
                    "sysOrgCode": "",
                    "updateBy": "",
                    "updateTime": ""
                })
                var jmhsjtj = SM.encrypt(jmqsjtj,
                    //公钥
                    "049cd21c88a299a7a07fa8c64155571bce69c0a43a1c07b0633ac923bcc25d2656e9ff5af196874302494bdd6b59d9cea01d2fb1f79a6885ba23fa214f56bb41e6"
                );
                // var appid = that.appid;
                var appid = "Embmzckm";
                var interfaceid = 'crjjb';
                var interfacecontent = jmhsjtj
                var fromport = '2';
                var signurl = 'https://' + urldomaincreatesign;
                var gatewayurl = 'https://' + urldomaingateway;
                vaildInterfacefn(appid, interfaceid, interfacecontent, fromport, signurl, gatewayurl).then(value => {
                    //私钥
                    var jjjsjtj = SM.decrypt(value,
                        "6636756e69f8276c514919d04eaf928498b443bfb783e8fe6fa6977056c4d90b");
                    var list = JSON.parse(jjjsjtj)
                    console.log(list);
                    if (list.code == 200) {
                        this.$toast("提交成功")
                        this.$router.push('./')
                    }
                })

            }
        },
    };
</script>

<style scoped>
    .yd {
        margin-bottom: 40px;
        width: 90%;
        left: 5%;
    }

    .van-cell {
        font-size: 18px;
    }

    .van-cell-group__title {
        font-size: 18px;
    }

    .van-radio__label {
        margin-left: 0px;
        margin-top: 2%;
        line-height: 0%;
    }

    .van-cell {
        box-sizing: border-box;
    }

    .van-radio--horizontal {
        margin-right: 8px;
        margin-top: 2%;
    }

    .van-pull-refresh {
        height: calc(100vh - 1px) !important;
        overflow: auto !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .van-cell-group__title {
        color: #6b6262;
    }

    .van-cell-- {
        background-color: #a6a6a626;
    }

    .boxaw {
        height: 100vh;
    }

    .van-cell-group__title:before {
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;

    }

    /* .ab:before {
        position: relative;
        content: "*";
        color: red;
        margin-right: 5px;
        font-size: 14px;
        top: -25px;
        left: 5px;
    } */
</style>